<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Test20</title>
    <link th:href="@{bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet" />
    <link th:href="@{bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet" />
    <style type="text/css">
        .btn-mini {
            padding: 0 6px;
            font-size: 10.5px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

    </style>
</head>
<body>
<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-6 ">
        <div class="thumbnail" >
            <div class="panel-body">
                <h3> <span class="label label-primary">服务器</span> </h3>
            </div>
            <div class="caption" >

                <div class="panel" th:each="ServiceList : ${Services}">
                    <div  class="col-md-4">
                        <b  name="ip" th:alt="${ServiceList.ip}"  th:text="${ServiceList.ip}"></b>
                        <b>：</b>
                        <b th:text="${ServiceList.port}"></b>
                    </div>
                    <div class="col-md-2">》》</div>
                    <div th:text="${ServiceList.name}" class="col-md-4"></div>
                    <div class="col-md-2"><a href="#"  th:alt="${ServiceList.ip}" class="deleteServiceButton btn btn-danger btn-mini">Delete</a></div>
                </div>



            </div>
            <div class="caption">
                <button data-toggle="modal" data-target="#addServiceModal" type="button" class="btn btn-primary btn-mini">add</button>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-6 ">
        <div class="thumbnail" >
            <div class="panel-body">
                <h3> <span class="label label-success">客户端</span></h3>

            </div>
            <div class="caption">

                <div class="panel" th:each="ClientList : ${Clients}">
                    <div  class="col-md-4">
                        <b name="ip" th:alt="${ClientList.ip}" th:text="${ClientList.ip}"></b>
                        <b>：</b>
                        <b th:text="${ClientList.port}"></b>
                        <b th:text="${ClientList.name}"></b>
                    </div>
                    <div class="col-md-1">》》</div>
                    <div class="col-md-2">
                        <b th:if="${ClientList.services!=null}" th:text="${ClientList.services.ip}">

                        </b>

                    </div>
                    <div class="col-md-5">
                        <a data-toggle="modal" data-target="#updateServiceModal" class="btn btn-primary btn-mini">Edit</a>
                        <a href="#"  th:alt="${ClientList.ip}" class="unbindButton btn btn-warning btn-mini">Unbind</a>
                        <a href="#"  th:alt="${ClientList.ip}" class="deleteClientButton btn btn-danger btn-mini">Delete</a>
                    </div>
                </div>


            </div>
            <div class="caption">
                <button type="button" data-toggle="modal" data-target="#addClientModal" class="btn btn-primary btn-mini">add</button>
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-4 col-lg-12 ">
        <div class="thumbnail" >
            <div class="panel-body">
                <h3> <span class="label label-primary">其他操作</span> </h3>
            </div>
            <div class="caption" >

                <button type="button" id="redisBufferClearButton" class="btn btn-warning btn-mini">Redis清除缓存</button>


            </div>
        </div>
    </div>

</div>



<!-- 服务端修改模态框（Modal） -->
<div class="modal fade" id="updateServiceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="updateServiceLabel">服务端IP修改</h4>
            </div>
            <div class="modal-body">
                <div class="panel-body">

                    <div class="select col-sm-12 col-md-12" >
                        客户端:
                        <select id="updateClientsSelect" class="select col-sm-6 col-md-6" >
                            <option th:each="ClientList : ${Clients}" th:text="${ClientList.ip}" th:value="${ClientList.ip}"></option>
                        </select>

                    </div>
                    <div class="select col-sm-12 col-md-12" >
                        服务端:
                        <select id="updateServiceSelect" class="select col-sm-6 col-md-6" >
                            <option th:each="ServiceList : ${Services}" th:text="${ServiceList.ip}" th:value="${ServiceList.ip}"></option>
                        </select>

                    </div>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="updateServiceButton" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->







<!-- 服务端添加模态框（Modal） -->
<div class="modal fade" id="addServiceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="addServiceLabel">服务器IP端添加</h4>
            </div>
            <div class="modal-body">
                <form id="ServiceForm" class="form-horizontal row-fluid" >
                    <div class="form-row control-group row-fluid">
                        <label class="control-label span3" for="normal-field">ip</label>
                        <div class="controls span9">
                            <input type="text" name="ip" class="row-fluid">
                        </div>
                    </div>
                    <div class="form-row control-group row-fluid">
                        <label class="control-label span3" for="normal-field">port</label>
                        <div class="controls span9">
                            <input type="text" name="port" class="row-fluid">
                        </div>
                    </div>
                    <div class="form-row control-group row-fluid">
                        <label class="control-label span3" for="normal-field">name</label>
                        <div class="controls span9">
                            <input type="text" name="name" class="row-fluid">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="addServiceButton" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->



<!-- 客户端添加模态框（Modal） -->
<div class="modal fade" id="addClientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="addClientLabel">客户端IP添加</h4>
            </div>
            <div class="modal-body">
                <form id="ClientForm" class="form-horizontal row-fluid">
                    <div class="form-row control-group row-fluid">
                        <label class="control-label span3" for="normal-field">ip</label>
                        <div class="controls span9">
                            <input type="text" name="ip" class="row-fluid">
                        </div>
                    </div>
                    <div class="form-row control-group row-fluid">
                        <label class="control-label span3" for="normal-field">port</label>
                        <div class="controls span9">
                            <input type="text" name="port" class="row-fluid">
                        </div>
                    </div>
                    <div class="form-row control-group row-fluid">
                        <label class="control-label span3" for="normal-field">name</label>
                        <div class="controls span9">
                            <input type="text" name="name" class="row-fluid">
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="addClientButton" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script th:src="@{jquery.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap-3.3.7-dist/js/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{js/main.js}" type="text/javascript"></script>
</body>
</html>